﻿<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Upload.aspx.cs" Inherits="BigFileUploadDemo4Framework._Default" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <script src="wwwroot/lib/fcup2/src/fcup.js"></script>
    <link href="wwwroot/lib/jqueryToast/css/toast.style.css" rel="stylesheet" />
    <script src="wwwroot/lib/jqueryToast/js/toast.script.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/busy-load/dist/app.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/busy-load/dist/app.min.css" rel="stylesheet">
    <div class="jumbotron">
        <h1>BigFileUploadDemo For Asp.net</h1>
    </div>

    <div class="text-center">
        <h1 class="display-4">大文件上传页面演示</h1>
        <br />
        <p>
            <button type="button" class="btn btn-primary" id="upid">上传</button>
        </p>

        <div class="progress">
            <div id="upload_progress" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
        </div>
        <p>
            <a id="file_url" target="_blank"></a>
        </p>
        <br />
    </div>

    <div class="alert alert-warning" role="alert">
        由于分段上传需要验证文件md5值，所以大文件上传前的等待时长可能会较长（1GB的文件大约需要30秒前置等待时间，可展示一个活动的loading框）
    </div>

    <script>
        var baseApi = "<%= ResolveUrl("~/Api/File")%>/";
        let uploaded_file_index = 0;
        //上传案例
        let up = new fcup({

            id: "upid", // 绑定id

            url: baseApi+"UploadWeb",// url地址

            checkurl: baseApi+"CheckFile", // 检查上传url地址

            type: "jpg,png,jpeg,gif,mp4,mpeg,zip,rar", // 限制上传类型，为空不限制

            shardsize: "0.5", // 每次分片大小，单位为M，默认1M

            minsize: '', // 最小文件上传M数，单位为M，默认为无

            maxsize: "2048", // 上传文件最大M数，单位为M，默认200M

            // headers: {"version": "fcup-v2.0"}, // 附加的文件头,默认为null, 请注意指定header头时将不能进行跨域操作

            // apped_data: {}, //每次上传的附加数据
            timeout: 600000,
            // 定义错误信息
            errormsg: {
                1000: "未找到上传id",
                1001: "类型不允许上传",
                1002: "上传文件过小",
                1003: "上传文件过大",
                1004: "上传请求超时"
            },

            // 错误提示
            error: (msg) => {
                alert(msg);
            },

            // 初始化事件
            start: () => {
                console.log('上传已准备就绪');
                Progress(0);
                $("#file_url").html("").removeAttr("href")
            },

            // 等待上传事件，可以用来loading
            beforeSend: () => {
                console.log('等待请求中');
            },

            // 上传进度事件
            progress: (num, other) => {
                uploaded_file_index = num;
                Progress(num);
                console.log(num);
                console.log('上传进度' + num);
                console.log("上传类型" + other.type);
                console.log("已经上传" + other.current);
                console.log("剩余上传" + other.surplus);
                console.log("已用时间" + other.usetime);
                console.log("预计时间" + other.totaltime);
            },

            // 检查地址回调,用于判断文件是否存在,类型,当前上传的片数等操作
            checksuccess: (res) => {
                let data = res ? eval('(' + res + ')') : '';
                let status = data.code;
                let msg = data.message;

                // 错误提示
                if (status == -1) {
                    //alert(msg);
                    Toaster("error", msg);
                    return false;
                }

                // 已经上传
                if (status == 2) {
                    Progress(100, 0);
                    Toaster("warning ", msg);
                    let download_url = "http://" + location.host + "/wwwroot" + data.data.url;
                    $("#file_url").html(download_url).removeAttr("href").attr("href", download_url);
                    return false;
                }

                // 如果提供了这个参数,那么将进行断点上传的准备
                if (data.data && data.data.file_index) {
                    //alert("已上传大约" + data.data.percent + "%");
                    Toaster("warning", "已上传大约" + data.data.percent + "%", "提示");
                    Progress(data.data.percent);
                    // 起始上传的切片要从1开始
                    let file_index = data.data.file_index ? parseInt(data.data.file_index) : 1;
                    // 设置上传切片的起始位置
                    up.setshard(file_index);

                }
                // 如果接口没有错误，必须要返回true，才不会终止上传
                return true;
            },

            // 上传成功回调，回调会根据切片循环，要终止上传循环，必须要return false，成功的情况下要始终返回true;
            success: (res) => {
                let data = res ? eval('(' + res + ')') : '';
                let url = data.url + "?" + Math.random();
                let file_index = data.file_index ? parseInt(data.file_index) : 1;
                if (data.Completed) {
                    Progress(100, 0);
                    Toaster("success", "上传完成")
                    let download_url = "http://" + location.host + "/wwwroot" + url;
                    $("#file_url").html(download_url).removeAttr("href").attr("href", download_url);
                }

                // 如果接口没有错误，必须要返回true，才不会终止上传循环
                return true;
            }
        });

        //进度变化
        function Progress(value, animated = 1) {
            let progress = $("#upload_progress");
            let percent = value + "%";
            progress.removeClass("progress-bar-success");
            progress.html(percent);
            progress.css("width", percent);
            progress.attr("aria-valuenow", percent);
            if (animated == 0) {
                progress.removeClass("active")
            } else {
                progress.addClass("active")
            }
            if (value == 100 && !progress.hasClass("progress-bar-success")) {
                progress.addClass("progress-bar-success");

            }

        }
        //弹窗
        function Toaster(type, message, title = "消息") {
            $.Toast(title, message, type, {
                stack: true,
                has_icon: true,
                has_close_btn: true,
                position_class: "toast-top-right",
                fullscreen: false,
                timeout: 3000,
                sticky: false,
                has_progress: false,
                rtl: false,
            });
        }

        //loading
        function loading() {
            $(".text-center").busyLoad("show", {
                //background: "#000",
                spinner: "accordion",
                animation: "slide",
                text: "上传准备中，请稍后..."
            });
        }
        function closeLoading() {
            $(".text-center").busyLoad("hide");
        }
    </script>
</asp:Content>
